<template>
  <table class="customTable" cellpadding="0" cellspacing="0">
    <tr>
      <td :colspan="2" class="t-label">
        {{ title }}
      </td>
    </tr>
    <tr v-for="(row, index) in tableData" :key="`row-${index}-${row.name}`">
      <td class="t-blue">
        {{ row.name }}
      </td>
      <td>
        <div class="cell">
          <template v-for="(sensor, i) in row.sensors">
            <span :key="`row-${index}-${i}-${row.name}-${sensor?.cdValue}`">
              <span
                :class="getStatusClass(sensor)"
                class="highlightOnce"
                v-if="notFan(sensor)"
              >
                {{ sensor?.cdValue }}{{ sensor?.unitCode }}
              </span>
              <i
                v-else
                class="iconfont icon-fengji"
                :class="{ spin: ['0', '4', '5'].includes(sensor.cdState) }"
              />
            </span>
          </template>
        </div>
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  name: 'CustomTable',
  inject: ['getNode'],
  data () {
    return {
      title: '标题',
      tableData: [{ name: '别名', sensor: '数据源' }]
    }
  },
  mounted () {
    const node = this.getNode()
    this.setDate(node.data)
    node.on('change:data', async ({ current }) => {
      this.setDate(current)
    })
  },
  methods: {
    setDate (data) {
      const sensorList = JSON.parse(localStorage.getItem('sensorList'))
      this.tableData = data.list.map((item) => {
        const sensors = item.sensorCode.map((code) => {
          const node = sensorList.find((node) => node.cdCode === code)
          if (node) {
            return node
          } else {
            return {
              code: item.code,
              sensorType: '0001',
              areaLocation: '',
              cdValue: '已拆除',
              unitCode: ''
            }
          }
        })
        item.sensors = sensors
        return item
      })
      this.title = data.title
    },
    // 判断不是通风
    notFan (sensor) {
      return (
        !['1001', '1003', '1010'].includes(sensor.sensorType) &&
        !(sensor.sensorType === '1004' && sensor.areaLocation.includes('扇'))
      )
    },
    // 获取传感器状态class
    getStatusClass (sensor) {
      if (['0004', '0005'].includes(sensor.sensorType)) {
        // 标校
        return 't-green'
      } else if (
        ['0001', '0002', '0008', '0016', '0128'].includes(sensor.sensorType)
      ) {
        // 告警
        return 't-red'
      } else {
        // 正常
        return 't-blue'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.customTable {
  width: 100%;
  --fontSize: 40px;
  --borderColor: #409eff;
  border-left: 1px solid var(--borderColor);
  border-top: 1px solid var(--borderColor);
  font-size: var(--fontSize);

  td {
    box-sizing: border-box;
    border-right: 1px solid var(--borderColor);
    border-bottom: 1px solid var(--borderColor);
    padding: 5px;
    min-width: 70px;
    height: calc(var(--fontSize) + 10px);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.cell {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.t-label {
  color: #409eff;
  font-weight: bold;
  font-size: calc(var(--fontSize) + 10px);
}
.t-blue {
  color: #409eff;
}

.t-red {
  color: #f56c6c;
}

.t-green {
  color: #67c23a;
}

.highlightOnce {
  animation: highlightOnce 0.3s linear 1;
  margin-right: 10px;
}

.icon-fengji {
  font-size: calc(var(--fontSize) + 10px);
  font-weight: bold;
  color: red;
}

.spin {
  color: #67c23a;
  display: inline-block;
  animation: animation-spin 1s linear infinite;
}

@keyframes animation-spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

@keyframes highlightOnce {
  0% {
    filter: brightness(0.5);
  }

  100% {
    filter: brightness(1);
  }
}
</style>
